<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="乙烷回收率" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <Device :data="dataA[0].pointValue" :title="dataA[0].NAME" :unit="''" :imageUrl="image2" :colors="1" />
                <Device :data="dataA[1].pointValue" :title="dataA[1].NAME" :unit="''" :imageUrl="image2" :colors="1" />
                <Device :data="dataA[2].pointValue" :title="dataA[2].NAME" :unit="''" :imageUrl="image3" :colors="1" />
                <Device :data="dataA[3].pointValue" :title="dataA[3].NAME" :unit="''" :imageUrl="image3" :colors="1" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="导热油炉日用量统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <EnergyRightB :data="dataB" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="导热油炉月年用量" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <EnergyRightC :data="DataDevice" />
            </div>
        </div>
    </div>
</template>

<script>
import { energy_right } from "@/request/api.js";
import image2 from "@/assets/组 6832(1).png";
import image3 from "@/assets/组 6832(2).png";
import Device from "./components/Device.vue";
import EnergyRightC from "./components/EnergyRightC.vue";
import EnergyRightB from "./components/EnergyRightB.vue";
export default {
    components: {
        Device,
        EnergyRightC,
        EnergyRightB,
    },
    data() {
        return {
            dataA: [
                { pointValue: "0", NAME: "标题" },
                { pointValue: "0", NAME: "标题" },
                { pointValue: "0", NAME: "标题" },
                { pointValue: "0", NAME: "标题" },
            ],
            image2: image2,
            image3: image3,
            DataDevice: [],
            dataB: [[],[]],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);
        },
        pass1fun(string) {
            let str = ''
            if (string == 'FOPD') {

            } else if (string == 'FONM') {
                str = '/月'
            } else if (string == 'FONY') {
                str = '/年'
            }
            return str
        },
        passfun(data) {
            let array = data
            array.forEach(element => {
                let num = element.itemlocano[5] * 1
                let string = element.itemlocano.slice(10, 14)
                console.log(num, string);
                switch (num) {
                    case 1:
                        element.title = '1#低温导热炉' + this.pass1fun(string)
                        break;
                    case 2:
                        element.title = '2#低温导热炉' + this.pass1fun(string)
                        break;
                    case 3:
                        element.title = '3#低温导热炉' + this.pass1fun(string)
                        break;
                    case 4:
                        element.title = '4#低温导热炉' + this.pass1fun(string)
                        break;
                    case 5:
                        element.title = '1#高温导热炉' + this.pass1fun(string)
                        break;
                    case 6:
                        element.title = '2#高温导热炉' + this.pass1fun(string)
                        break;
                    case 7:
                        element.title = '3#高温导热炉' + this.pass1fun(string)
                        break;
                    default:
                        break;
                }
            });
            console.log(array);

            return array
            l
        },
        getData() {
            energy_right()
                .then((res) => {
                    console.log("res:", res);
                    if (res.data) {
                        this.dataA = res.data.data1;
                        let arrs = [], arr = [];
                        // this.DataDevice = res.data.data3;
                        this.DataDevice = this.passfun(res.data.data3)
                        this.DataDevice.forEach(element => {
                            let string = element.itemlocano.slice(10, 14)
                            if (string == "FOPD") {
                                arrs.push(element.title)
                                arr.push(element.itmval)
                            }
                        });
                        this.dataB = [arrs, arr]
                    }
                })
                .catch(() => {
                    console.log("错误");
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.div1 {
    height: 277px;

    .div1_d {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;
    }
}

.div3 {
    .div1_d {}
}
</style>
